<template>
  <div>
    <div class="myRobot myRobotUserDialog">
      <robotNav></robotNav>
      <div class="myRobotRight">
        <div class="myRobotUserDialog_left">
          <div class="myRobotUserDialog_left_time">
            <div class="left_time_le">
              <div class="time_le_li notBlue" @click="changeTab(1)" :class="{ active: activeTab === 1 }">昨天</div>
              <div class="time_le_li notBlue" @click="changeTab(2)" :class="{ active: activeTab === 2 }">今天</div>
              <div class="time_le_li notBlue" @click="changeTab(3)" :class="{ active: activeTab === 3 }">最近一周</div>
            </div>
            <div class="left_time_ri">
              <el-date-picker
                v-model="timeRange"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="getList"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div class="myRobotUserDialog_left_content ovauto2" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
              <div class="left_content_list notBlue " :class="{'active':index===selected_index}" v-for="(chat,index) in tableData" :key="index" @click="viewChat(index)">
                <div class="content_list_top">
                  <div class="list_top_dd">{{chat.name}}</div>
                  <div class="list_top_dt">{{chat.create_time}}</div>
                </div>
                <div class="content_list_bottom">
                  <div class="list_bottom_dd"><span><img src="@a/img/sv80on.svg"/><img src="@a/img/sv80.svg"/></span>{{chat.count_msg}}个问题</div>
                  <div class="list_bottom_dt"><span><i class="el-icon-user"></i></span>{{ chat.user_name }}</div>
                </div>
              </div>


          </div>
          <div class="myRobotUserDialog_left_page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
          </div>
        </div>
        <div class="myRobotUserDialog_right">
          <div class="myRobotUserDialog_right_top">
            <div class="right_top_left">
              <div class="right_top_icon"><i class="el-icon-user"></i></div>
              <div class="right_top_txt">
                <div class="top_txt_dd">{{ tableData.length? tableData[selected_index].user_name:'' }}</div>
                <div class="top_txt_dt">
                  {{chatList.length}}条对话<span></span>
                  <div class="txt_dt_btn green">{{like}}<img src="@a/img/sv68.svg"/></div>
                  <span></span>
                  <div class="txt_dt_btn red">{{unlike}}<img src="@a/img/sv69.svg"/></div>
                </div>
              </div>
            </div>
            <div class="right_top_right notBlue"><b>触发留言</b><span>{{events}}</span></div>
          </div>
          <div class="myRobotUserDialog_right_bottom ovauto2">
            <div v-for="(item, index) in chatList" v-loading="loading_message">
              <div class="chat_list user">
                <div class="chat_list_left">
                  <div class="list_left_txt">
                    <div class="left_txt_question">
                      <div class="txt_question_dd">{{ item.create_time }}</div>
                      <div class="txt_question_p">{{ item.user_questions }}</div>
                    </div>
                  </div>
                </div>
                <div class="chat_list_right"><img :src="img_dog"/></div>
              </div>
              <div class="chat_list dog">
                <div class="chat_list_left">
                  <div class="list_left_txt">
                    <div class="left_txt_question">
                      <div class="txt_question_dt">{{ item.answer_time_str }}</div>
                      <div class="txt_question_con">
                        <markdown-it-vue-light class="txt_question_p" :content="item.machine_answer"/>
                        <div class="txt_question_icon">
                          <div class="question_icon_li notBlue " :class="{'active': item.is_positive_reviews == 1}" >
                            <img src="@a/img/sv68on.svg"/>
                            <img src="@a/img/sv68.svg"/>
                          </div>
                          <div class="question_icon_li notBlue" :class="{'active': item.is_positive_reviews == -1}" >
                            <img src="@a/img/sv69on.svg"/>
                            <img src="@a/img/sv69.svg"/>
                          </div>
                        </div>
                      </div>
                      <div class="txt_question_source" @click="toggleClass(item)" :class="{ 'active': item.isActive }" v-if="item.referenced_files.length">
                        <div class="question_source_title notBlue">查看来源<i class="el-icon-arrow-down"></i></div>
                        <div class="question_source_down">
                          <a :href="url.url" class="source_down_list" v-for="(url, url_index) in item.referenced_files"
                             target="_blank">{{ url.url }}_{{ url.score }}</a>
                        </div>
                      </div>
                      <el-form ref="form" label-width="50px" v-if="item.is_event_submission" style="border: 1px solid  rgb(217, 236, 255);padding: 20px;">
                        <el-tag >{{item.event_details.form_name}}</el-tag>
                        <el-form-item :label="field" v-for="(field, index) in item.event_details.form_field" :key="'field_'+index">
                          <el-input v-model="item.user_submission[field]" name="field" :readonly="item.is_event_submission==1"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" v-if="!item.is_event_submission" @click="submitUserInfo(item)">提交信息</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
                <div class="chat_list_right"><img :src="img_ai"/></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import robotNav from "@c/common/robotNav/robotNav";
    import {api} from "@/api-js";
    import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min.js'
    import 'markdown-it-vue/dist/markdown-it-vue-light.css'
    import {timeRange} from "@/utils/timeRange";

    export default {
        data() {
            return {

              loading: false,
              loading_message: false,
              activeTab: 0,
              selected_index: 0,
              chat_id: 0,

              currentPage: 1,
              pageSize: 10,
              total: 0,
              tableData: [],
              timeRange: ['',''],

              img_ai: require("@a/img/bg30.jpg"),
              img_dog: this.baseURL + this.$store.getters.memberInfo.avatar,
              chatList: [],
              like: 0,
              unlike: 0,
              events: 0,

            };
        },
        components: {
          robotNav,
          MarkdownItVueLight
        },
        methods:{
          async viewChat(index) {
            this.selected_index = index;
            let conversion_id = this.tableData[index].id;
            this.loading_message = true;
            const [e, r] = await api.conversation.getById(conversion_id)
            this.loading_message = false;
            if(!e && r) {
              this.chatList = r.result.messages;
              this.like = 0;
              this.unlike = 0;
              this.events = 0;
              for (const obj of this.chatList) {
                if (obj.is_positive_reviews == 1) {
                  this.like ++;
                }
                if (obj.is_positive_reviews == -1) {
                  this.unlike ++;
                }
                if(obj.is_event_submission == 1) {
                  this.events ++;
                }
              }

            }
          },

          toggleClass(item) {
            item.isActive = !item.isActive;
          },

          changeTab(index) {
            this.activeTab = index;
           if(index === 1){
             this.timeRange = timeRange.yesterday;
           }
            if(index === 2) {
              this.timeRange = timeRange.today;
            }
            if(index === 3){
              this.timeRange = timeRange.lastWeek;
            }
            this.getList();
          },

          async getList() {
            this.loading = true;
            const [e, r] = await api.conversation.list({
              robot_id: this.$store.getters.robotId,
              page: this.currentPage,
              page_size: this.pageSize,
              start_time: this.timeRange[0],
              end_time: this.timeRange[1],
              chat_id: this.chat_id,
            })
            this.like = 0;
            this.unlike = 0;
            this.events = 0;
            this.chatList = [];
            this.loading = false;
            if(!e && r) {
              this.tableData = r.result.data;
              this.total = r.result.total;
              if(this.tableData.length) {
                this.selected_index = 0;
                await this.viewChat(this.selected_index)
              }
            }
          },


          handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
          },
          handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
          },

          handleSearch() {
            this.currentPage = 1;
            this.getList();
          },
        },
        mounted() {
          if(this.$route.query.chat_id) {
            this.chat_id = this.$route.query.chat_id;
          }
          this.getList()
        },
    }
</script>


<style>
@import "myRobotUserDialog.css";
</style>
